<template>
  <div class="w-full h-full min-h-screen box-border relative">  
    <van-nav-bar 
      left-arrow 
      :title="$t('pageTitle.bindWithdrawalPassWord')" 
      @click-left="router.back()" 
      safe-area-inset-top 
    />
    <van-config-provider :theme-vars="themeVars">
      <van-form @submit="submit" class="!mx-4 !mt-10">
        <van-cell-group inset>
          <PassWord 
            label=" "
            v-model="params.password"  
            name="password" 
            clearable
            label-width="0rem"
            :placeholder="$t('placeholder.enterWithdrawalPassWord')" 
            :rules="rules.passwordRules" 
          />
        </van-cell-group>
        <van-cell-group inset class="!mt-4">
          <PassWord 
            label=" "
            v-model="params.confirmPassword"  
            name="confirmPassword" 
            clearable
            label-width="0rem"
            :placeholder="$t('placeholder.confirmWithdrawalPassWord')" 
            :rules="rules.confirmPasswordRules" 
          />
        </van-cell-group>
        <div class="mt-12 mx-4">
          <van-button 
            round 
            block 
            type="primary" 
            native-type="submit" 
            color="#000"
            :loading="loading"
          >
            <span class="text-white text-[16px]">
              {{ $t('confirm') }}
            </span>
          </van-button>
        </div>
      </van-form>
    </van-config-provider>
    <van-number-keyboard safe-area-inset-bottom />
  </div>
</template>
<script setup lang="ts">
import PassWord from "@/components/Password/index.vue"

import { showToast, type FieldRule } from "vant"

import { useRouter } from "vue-router"

import { useI18n } from 'vue-i18n'

import { useUserStore } from "@/store/user"

import { setWalletPass } from "@/service/login"

const user = useUserStore()

const router = useRouter()

const { t } =  useI18n({ useScope: 'global' })

const themeVars = { 
  cellBackground: "#F5F7F9",
  cellGroupInsetRadius: '300px',
  cellVerticalPadding: '12px'
}

const loading = ref<boolean>(false)

const params = ref({
  password: "",
  confirmPassword: ""
})

const rules: { [key: string]: FieldRule[] } = {
  passwordRules: [{ required: true, message: t('rule.withdrawalPassWordNotEmpty'), trigger: 'onBlur' }],
  confirmPasswordRules: [
    {
      validator: (val) => {
        return params.value.password == val ? '' : t('rule.passNotMatch');
      },
    },
  ]
}

const submit = async () => {
  try { 
    loading.value = true

    const res = await setWalletPass({
      password: params.value.password
    })

    loading.value = false 

    if(!res.success) return 

    showToast(res.message)

    // user.setWallet(res.data)

    user.loadWallet()

    setTimeout(() => {
      router.back()
    }, 500)
  } catch(err){
    loading.value = false
    throw err
  }
}
</script>

<style lang="less" scoped>
:deep(.van-field__error-message) {
  position: absolute;
  top: 0;
  left: 50%;
}
</style>
